<script setup>
import { ref, watch } from "vue";
import { RouterLink, RouterView, useRoute } from "vue-router";

let route = useRoute();
let active = ref("home");
let showTabbar = ref(true);
console.log(route);

watch(
  () => route,
  (newRoute) => {
    
    showTabbar.value = newRoute.meta.showTabbar;
    

    if (newRoute.path === "/home") active.value = "home";
    else if (newRoute.path === "/classify") active.value = "classify";
    else if (newRoute.path === "/cart") active.value = "cart";
    else if (newRoute.path === "/mine") active.value = "mine";
  },
  { immediate: true,deep: true }
);
</script>

<template>
  <van-tabbar v-if="showTabbar" v-model="active" active-color="#ee0a24">
    <van-tabbar-item name="home" icon="wap-home" to="/home"
      >精选</van-tabbar-item
    >
    <van-tabbar-item name="classify" icon="wap-nav" to="/classify"
      >分类</van-tabbar-item
    >
    <van-tabbar-item name="cart" icon="shopping-cart" to="/cart"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item name="mine" icon="user" to="/mine">我的</van-tabbar-item>
  </van-tabbar>
  <RouterView />
</template>

<style>
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    "Segoe UI", Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
}
.router-view {
  padding-bottom: 50px; /* 与 Tabbar 高度一致 */
}
</style>
